<template>
  <el-row :gutter="20">
  <el-col :span="12">
     <el-form :model="student"  label-width="100px" >
  <el-form-item label="姓名" prop="name"> 
    <el-input v-model="student.name"></el-input>
  </el-form-item>
  <el-form-item label="年龄" prop="age"> 
    <el-input v-model="student.age"></el-input>
  </el-form-item>
  <el-form-item label="专业" prop="subject">
    <el-select v-model="student.subjectsId" placeholder="请选择专业">
      <el-option :label="item.name" :value="item._id" v-for="item in rows" :key="item._id"></el-option>

    </el-select>
  </el-form-item>
  <el-form-item label="班级" prop="classes">
    <el-select v-model="student.classesId" placeholder="请选择班级">
      <el-option :label="item.name" :value="item._id" v-for="item in classData" :key="item._id"></el-option>

    </el-select>
  </el-form-item>
  
  <el-form-item label="性别" prop="gender">
    <el-radio-group v-model="student.gender">
      <el-radio label="男"></el-radio>
      <el-radio label="女"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="makeAdd">立即创建</el-button>
    <el-button @click="student={}">取消</el-button>
  </el-form-item>
</el-form>
     </el-col>
  <el-col :span="6">

    <el-upload
  class="avatar-uploader"
  action="http://47.98.128.191:3000/images/uploadImages"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  >
  <img v-if="student.imagePath" :src="student.imagePath" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
  </el-col>
</el-row>

 
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions:studentActions } =  createNamespacedHelpers("student");
const { mapActions:subjectActions ,mapState:subjectState} =  createNamespacedHelpers("subject");
const { mapActions:classesActions ,mapState:classesState} =  createNamespacedHelpers("classes");
export default {
  
        data() {
          return {
            student:{},
           
          }
        },
        created() {
            this.getSubjectAsync()
        },
        methods: {
            ...studentActions(['addStudentsAsync']),
            ...subjectActions(['getSubjectAsync']),
            ...classesActions(['getClassById']),
         async makeAdd(){
            const data= await this.addStudentsAsync(this.student)
            if(data.code){
                  this.$message({
                    message: '添加学生成功',
                    type: 'success'
                  });              
            }
            this.$router.push('/home/studentList')
              
            },
            //图片方法
             handleAvatarSuccess(res) {
               if(res.code){
                this.$set(this.student, "imagePath", res.data[0]);
               }
        
      },
    
           
        },
        computed:{
          ...subjectState(['rows']),
          ...classesState({ classData:'rows' })
        },
        watch:{
          'student.subjectsId'(val){
                    this.getClassById({subjectsId:val})
          }
        }
}
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px !important;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
.el-select{
  width: 60%;
}
</style>